import React, { Component } from "react";

export default class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      selectedDate: "",
      date: new Date(), //表示当前时间
      visble: false,
    };
  }
  prev = () => {
    this.state.date.setMonth(this.state.date.getMonth() - 1);
    this.initDate();
  };
  next = () => {
    this.state.date.setMonth(this.state.date.getMonth() + 1);
    this.initDate();
  };

  initDate = () => {
    let currentMonthDays = this.state.date.getCurrentMonthDays();
    //当前月有多少天
    let prevMonthDays = this.state.date.getPrevMonthDays();
    //上一个月有多少天

    let week = this.state.date.getCurrentMonthFirstDayWeek();
    //第一天是星期几
    week = week === 0 ? 7 : week;

    let nextMonthDays = 42 - currentMonthDays - week + 1;
    let list = [];
    for (let i = prevMonthDays - week + 2; i <= prevMonthDays; i++) {
      let tempDate = new Date("2000-01-01");
      tempDate.setFullYear(this.state.date.getFullYear());
      tempDate.setMonth(this.state.date.getMonth() - 1);
      tempDate.setDate(i);

      list.push({
        date: tempDate,
        i,
        className: "prev",
      });
    }
    //上一个月
    for (let i = 1; i <= currentMonthDays; i++) {
      let tempDate = new Date("2000-01-01");
      tempDate.setFullYear(this.state.date.getFullYear());
      tempDate.setMonth(this.state.date.getMonth());
      tempDate.setDate(i);

      list.push({
        date: tempDate,
        i,
        className: "current",
      });
    }
    //当前月

    for (let i = 1; i <= nextMonthDays; i++) {
      let tempDate = new Date("2000-01-01");
      tempDate.setFullYear(this.state.date.getFullYear());
      tempDate.setMonth(this.state.date.getMonth() + 1);
      tempDate.setDate(i);

      list.push({
        date: tempDate,
        i,
        className: "next",
      });
    }
    this.setState({
      list,
    });
  };

  componentDidMount() {
    this.initDate();
    document.addEventListener("click",(e)=>{
      e.stopPropagation();
      this.setState({
        visble:false
      })

    })
  }

  render() {
    return (
      <div className="datepicker">
        <input
          value={this.state.selectedDate}
          onFocus={(e) => {
           
            this.setState({
              visble: true,
            });
          }}
          onClick={(e)=>{
            e.stopPropagation();
          }}
          onChange={() => {}}
        />
        <div
          className="datepicker-box"
          style={{ display: this.state.visble ? "block" : "none" }}
        >
          <div className="datepicker-header">
            <div
              className="datepicker-prev"
              onClick={(e) => {
                e.stopPropagation();
                this.prev();
              }}
            >
              上
            </div>
            <div className="datepicker-middle">
              {this.state.date.formate("yyyy年mm月")}
            </div>
            <div
              className="datepicker-next"
              onClick={(e) => {
                e.stopPropagation();
                this.next();
              }}
            >
              下
            </div>
          </div>
          <div className="datepicker-th">
            <div className="datepicker-td">一</div>
            <div className="datepicker-td">二</div>
            <div className="datepicker-td">三</div>
            <div className="datepicker-td">四</div>
            <div className="datepicker-td">五</div>
            <div className="datepicker-td">六</div>
            <div className="datepicker-td">日</div>
          </div>
          <div className="datepicker-content">
            {this.state.list.map((item, index) => {
              return (
                <div
                  className="datepicker-item"
                  key={index}
                  onClick={() => {
                    // alert(item.date.formate("yyyy-mm-dd"));
                    this.setState({
                      selectedDate: item.date.formate("yyyy-mm-dd"),
                      visble:false
                    });
                  }}
                >
                  <span className={item.className}>{item.i}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
